<template>
	<view class="wanl-money">
		<wanl-navbar :isBack="true" :background="{background: '#fff',}" :showGongNeng="true">
			<text slot="content" style="color: #000; width: 100%;padding-left: 20rpx;">
				生成二维码
			</text>
		</wanl-navbar>
		<view class="cu-list menu-avatar">
			<view class="money" style="font-weight: bold">
				<t<text style="color: #fff;font-size:52rpx">¥</text>
					<text style="margin-left: 20rpx;font-size:68rpx;color: #fff;">{{ money }}</text>
			</view>
			<view class="titles">充值算力:{{ yuanbao_num }}个</view>
			<view class="erweimaContent">
				<!--				{{$wanlshop.oss(imgurl,50,50)}}-->
				<image style="width: 50vw;height: 50vw;border: 20rpx solid #f39a97;" :src="imgurl"></image>
			</view>
			<view class="edgeInsetBottom" @touchstart="longPress" @touchend="cancelLongPress">
				长按图片保存至相册并打开神话app支付
			</view>
			<view class="edgeInsetBottom" @click="apliyPay">
				保存至相册后点击进行支付宝支付
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgurl: '',
				order_id: '',
				user_id: '',
				money: '',
				yuanbao_num: '',
				isLongPress: false, // 是否长按
				timeout: null, // 计时器
				baseurl: '',
				paydata: ''
			};
		},
		computed: {

		},
		onLoad(option) {
			this.imgurl = option.path;
			this.order_id = option.order_id;
			this.user_id = option.user_id;
			this.money = option.money;
			this.yuanbao_num = option.yuanbao_num;
			if (option.payData) {
				this.paydata = option.payData
			}
			console.log("===path", this.imgurl)
		},
		methods: {
			async loadData() {
				await uni.request({
					url: '/wanlshop/pay/moneyLog',
					method: 'POST',
					data: {
						page: this.current_page
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.dataList = this.reload ? res.data.data : this.dataList.concat(res.data
						.data); //数据 追加
						this.total = res.data.total; //数据量
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = res.data.total == 0 ? 'noMore' : 'more';
					}
				});
			},
			longPress() {
				this.timeout = setTimeout(() => {
					this.isLongPress = true;
					// 执行保存图片的操作
					this.saveImage();
				}, 500); // 设置长按的阈值为500毫秒
			},
			cancelLongPress() {
				clearTimeout(this.timeout);
				this.isLongPress = false;
			},
			saveImage() {
				if (this.isLongPress) {
					//
					// uni.saveImageToPhotosAlbum({
					// 	filePath: 'your-image-url.jpg', // 图片的本地路径或网络路径
					// 	success: () => {
					// 		uni.showToast({title: '保存成功'});
					// 	},
					// 	fail   : () => {
					// 		uni.showToast({title: '保存失败', icon: 'none'});
					// 	}
					// });

					// #ifdef H5
					var that = this;
					let image = new Image();
					console.log("===下载图片")
					debugger
					// 解决跨域 Canvas 污染问题
					image.setAttribute("crossOrigin", "anonymous");
					image.onload = function() {
						let canvas = document.createElement("canvas");
						canvas.width = image.width;
						canvas.height = image.height;
						let context = canvas.getContext("2d");
						context.drawImage(image, 0, 0, image.width, image.height);
						let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
						that.baseurl = url;
						let a = document.createElement("a"); // 生成一个a元素
						let event = new MouseEvent("click"); // 创建一个单击事件
						a.download = that.imgurl; // 设置图片名称
						a.href = url; // 将生成的URL设置为a.href属性
						a.dispatchEvent(event); // 触发a的单击事件
					};
					image.src = that.baseurl;
					// #endif

				}
			},
			saveImages() {
				// 获取图片地址
				const imageUrl = this.imgurl;
				// 创建图片
				const image = new Image();
				image.src = imageUrl;

				// 图片加载完成后下载
				image.onload = () => {
					const canvas = document.createElement('canvas');
					canvas.width = image.width;
					canvas.height = image.height;
					const ctx = canvas.getContext('2d');
					ctx.drawImage(image, 0, 0);

					// 转换为base64格式
					const base64 = canvas.toDataURL('image/png');

					// 将base64转换为文件对象
					const parts = base64.split(';base64,');
					const contentType = parts[0].split(':')[1];
					const raw = window.atob(parts[1]);
					const rawLength = raw.length;
					const uInt8Array = new Uint8Array(rawLength);
					for (let i = 0; i < rawLength; ++i) {
						uInt8Array[i] = raw.charCodeAt(i);
					}
					const blob = new Blob([uInt8Array], {
						type: contentType
					});
					blob.lastModifiedDate = new Date();
					blob.name = 'image.png';

					// 保存图片到系统相册
					uni.saveImageToPhotosAlbum({
						filePath: blob,
						success() {
							uni.showToast({
								title: '图片保存成功',
								icon: 'success',
								duration: 2000
							});
						},
						fail(err) {
							console.log('保存失败：', err);
							uni.showToast({
								title: '图片保存失败',
								icon: 'none'
							});
						}
					});
				};
			},
			apliyPay() {
				uni.navigateTo({
					url: `alipay?url=${encodeURIComponent(this.paydata)}`
				})
			}
		}
	};
</script>

<style>
	page {
		overflow: hidden;
	}

	.menu-avatar {
		border: 0.5rpx solid transparent;
		width: 100%;
		height: 95vh;
		background: #f6332c url(https://d-shenhuashop.bigchun.com/h5test/yuanbao/erweima/erweimaBg.png) no-repeat center;
		background-size: 100%;
		background-position-y: 60px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;

		.edgeInsetBottom {
			width: 88vw;
			height: 120rpx;
			background: url("https://d-shenhuashop.bigchun.com/h5test/yuanbao/erweima/erweimaBtn.png") no-repeat center;
			background-size: 100%;
			margin: 100rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 34rpx;
		}

		.erweimaContent {
			margin: 60rpx auto 18rpx;
		}

		.money {
			margin: 120rpx auto 50rpx;
		}

		.titles {
			margin: 0 auto 20rpx;
			color: #fff;
			font-size: 38rpx;
		}
	}
</style>